<template>
  <div class="css-center">
    <page-header title="CSS居中" />
    <div class="markdown-body">
      <blockquote>inline-block元素的水平垂直居中</blockquote>
      <ul>
        <li>通过text-align:center水平居中</li>
        <li>vertical-align: middle;垂直居中</li>
      </ul>
        <textarea readonly class="code" rows=30>
          <ul class="list-outer">
            <li class="list-item">1</li>
            <li class="list-item">2</li>
            <li class="list-item">3</li>
          </ul>
          <style>
            .list-outer{
              margin: 0;
              padding: 0;
              color: #fff;
              text-align: center;
              background: #999;
              .list-item{
                display: inline-block;
                width: 100px;
                background: #1246a4;
                vertical-align: middle;
                &:first-child{
                  height: 30px;
                }
                &:nth-child(2){
                  height: 50px;
                }
                &:last-child{
                  height: 100px;
                }
              }
            }
          </style>
        </textarea>
    </div>
    <ul class="list-outer">
      <li class="list-item">1</li>
      <li class="list-item">2</li>
      <li class="list-item">3</li>
    </ul>
    <div class="markdown-body">
      <blockquote>block元素的水平垂直居中</blockquote>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .list-outer{
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
    background: #999;
    .list-item{
      display: inline-block;
      width: 100px;
      background: #1246a4;
      vertical-align: middle;
      &:first-child{
        height: 30px;
      }
      &:nth-child(2){
        height: 50px;
      }
      &:last-child{
        height: 100px;
      }
    }
  }
</style>

<script>
import PageHeader from './../../components/common/header';

export default {
  components: {
    PageHeader,
  },
};
</script>
